<template>
	<view>
		<view class="head">
			<u-navbar  :placeholder="true" bgColor="rgba(0,0,0,0.0)" :autoBack="false">
				<view slot="left"></view>
			</u-navbar>
			<view class="head-box">
				<view class="head-left">
					<view class="head-top">
						<view class="name" v-if="info.nickname">
							{{info.nickname}}
						</view>
						<view class="name" @click="$navTo.togo('/pages/login/index')" v-else>
							点击前去登录
						</view>
						<image v-if="info.level == 1" src="https://m.lqvvvv.com/assets/static/index/grade1.png" mode=""></image>
						<image v-if="info.level == 2" src="https://m.lqvvvv.com/assets/static/index/grade2.png" mode=""></image>
						<image v-if="info.level == 3" src="https://m.lqvvvv.com/assets/static/index/grade3.png" mode=""></image>
					</view>
					<view class="id">
						ID {{info.id || '666666'}}
						<view v-if="info.friend_level == 0" @click="gonavto">
							<image src="https://m.lqvvvv.com/images/vip1.png"  />
						</view>
						<view v-if="info.friend_level == 1" @click="gonavto">
							<image src="https://m.lqvvvv.com/images/vip2.png"  />
						</view>
						<view v-if="info.friend_level == 2" @click="gonavto">
							<image src="https://m.lqvvvv.com/images/vip3.png"  />
						</view>
						<view v-if="info.friend_level == 3" @click="gonavto">
							<image src="https://m.lqvvvv.com/images/vip4.png"  />
						</view>
					</view>
				</view>
				<view class="portrait" v-if="info.avatar">
					<view class="head-box">
						<view class="head">
							<view class="avatar-container" :style="{
						      backgroundImage: 'url(' + (info.avatar 
						        ? (info.avatar.startsWith('http') ? info.avatar : 'https://m.lqvvvv.com' + info.avatar)
						        : 'https://m.lqvvvv.com/assets/static/index/head.png') + ')'
						    }">
								<image class="avatar-frame" :src="'https://m.lqvvvv.com' + info.avatar_round"
									mode="aspectFit" style="width: 115%; height: 115%; top: -7.5%; left: -7.5%;"></image>
							</view>
						</view>
					</view>
					<view class="edit" @click="editInfo" v-if="tabshow == 0">
						<u-icon name="edit-pen" color="#fff" size="16"></u-icon>
						<view class="edit-text">
							编辑资料
						</view>
					</view>
				</view>
			</view>
		</view>
		<view class="content">
			<view class="member" @click="goVip">
				<image src="https://m.lqvvvv.com/assets/static/my/member.png" mode=""></image>
			</view>
			<view class="use">
				<view class="use-box">
					<view class="use-item" v-for="(item,index) in useList" :key="index" @click="gotonav(item.url)">
						<view class="use-icon">
							<image :src="item.img" mode="heightFix"></image>
						</view>
						<view class="use-text">
							{{item.text}}
						</view>
						<view class="make" v-if="index == 0">
							来赚钱
						</view>
					</view>
				</view>
				<view class="discount" @click="gotonav('/pages/my/coupon/index')">
					<view class="discount-title">
						惊喜连连，优惠享不停!
					</view>
					<view class="discount-text">
						<text>查看你的专属优惠券</text>
						<image src="https://m.lqvvvv.com/assets/static/my/right.png" mode=""></image>
					</view>
				</view>
			</view>
			<view class="service">
				<view class="service-title">
					更多服务
				</view>
				<view class="service-box">
					<view class="service-item" v-for="(item,index) in serviceList" :key="index"
						@click="gotonav(item.url)">
						<image :src="item.img" mode=""></image>
						<view class="service-text" v-if="item.url == '/pages/my/agent/index'">
							<text v-if="info.agent_status == 1">系统代理</text>
							<text v-else>代理认证</text>
						</view>
						<view class="service-text" v-else>
							{{item.text}}
						</view>
					</view>
				</view>
			</view>
		</view>
		<!-- #ifdef MP-WEIXIN -->
		<!-- <u-tabbar :value="3" :fixed="true" :placeholder="true" activeColor="#5755F2" inactiveColor="#2E314A"
			:safeAreaInsetBottom="true">
			<u-tabbar-item text="首页" v-if="tabshow == 0" @click="gotaburl('首页')">
				<image style="width: 38rpx; height: 38rpx;" slot="active-icon" src="/static/tabbar/home1.png"></image>
				<image style="width: 38rpx; height: 38rpx;" slot="inactive-icon" src="/static/tabbar/home0.png"></image>
			</u-tabbar-item>
			<u-tabbar-item text="商家" @click="gotaburl('商家')">
				<image style="width: 38rpx; height: 38rpx;" slot="active-icon" src="/static/tabbar/business1.png">
				</image>
				<image style="width: 38rpx; height: 38rpx;" slot="inactive-icon" src="/static/tabbar/business0.png">
				</image>
			</u-tabbar-item>
			<u-tabbar-item text="消息" @click="gotaburl('消息')">
				<image style="width: 38rpx; height: 38rpx;" slot="active-icon" src="/static/tabbar/msg1.png"></image>
				<image style="width: 38rpx; height: 38rpx;" slot="inactive-icon" src="/static/tabbar/msg0.png"></image>
			</u-tabbar-item>
			<u-tabbar-item text="我的" @click="gotaburl('我的')">
				<image style="width: 38rpx; height: 38rpx;" slot="active-icon" src="/static/tabbar/my1.png"></image>
				<image style="width: 38rpx; height: 38rpx;" slot="inactive-icon" src="/static/tabbar/my0.png"></image>
			</u-tabbar-item>
		</u-tabbar> -->
		<!-- #endif -->
	</view>
</template>

<script>
	import {
		mapState,
		mapActions
	} from 'vuex';
	export default {
		data() {
			return {
				useList: [{
						text: '成为达人',
						img: 'https://m.lqvvvv.com/assets/static/my/expert1.png',
						url: '/pages/my/expert/index'
					},
					{
						text: '我的订单',
						img: 'https://m.lqvvvv.com/assets/static/my/expert2.png',
						url: '/pages/my/order/index'
					},
					{
						text: '实名认证',
						img: 'https://m.lqvvvv.com/assets/static/my/expert3.png',
						url: '/pages/my/real/index',
					},
					{
						text: '我的钱包', 
						img: 'https://m.lqvvvv.com/assets/static/my/expert4.png',
						url: '/pages/my/wallet/index',
					}
				],
				serviceList: [
					// {
					// 	text: '邀请好友',
					// 	img: 'https://m.lqvvvv.com/assets/static/my/service1.png',
					// 	url: '/pages/my/invite/index',
					// },
					{
						text: '代理认证',
						img: 'https://m.lqvvvv.com/assets/static/my/service2.png',
						url: '/pages/my/agent/agency-pay/index',
					},
					{
						text: '紧急中心',
						img: 'https://m.lqvvvv.com/assets/static/my/service3.png',
						url: '/pages/my/urgent/index',
					},
					{
						text: '个人主页',
						img: 'https://m.lqvvvv.com/assets/static/my/service4.png',
						url: '/pages/my/my-main/index'
					},
					// {
					// 	text: '帮助反馈',
					// 	img: 'https://m.lqvvvv.com/assets/static/my/service5.png'
					// },
					// {
					// 	text: '在线客服',
					// 	img: 'https://m.lqvvvv.com/assets/static/my/service6.png',
					// 	url: '/pages/session-info/session-info',
					// },
					{
						text: '设置',
						img: 'https://m.lqvvvv.com/assets/static/my/service7.png',
						url: '/pages/my/set/index'
					},
					// {
					// 	text: '加盟查询',
					// 	img: 'https://m.lqvvvv.com/assets/static/my/service8.png',
					// 	url:'/pages/my/inquiry/index'
					// }
				],
				info: {},
				tabshow: 0
			}
		},
		onShow() {
			this.showinfo()
			let token = uni.getStorageSync("token") || '';
			if (token != '') {
				this.getuserinfo()
			}
			
		},
		computed: {
			...mapState(['isRealName']),
		},
		methods: {
			...mapActions(['checkRealName']),
			gotaburl(name) {
				if (name == '首页') {
					uni.switchTab({
						url: '/pages/index/index'
					})
				}
				if (name == '商家') {
					uni.switchTab({
						url: '/pages/business/index'
					})
				}
				if (name == '消息') {
					uni.switchTab({
						url: '/pages/message/index'
					})
				}
				if (name == '我的') {
					uni.switchTab({
						url: '/pages/my/index'
					})
				}
			},
			gonavto() {
				uni.navigateTo({
					url: '/pages/my/sage/index'
				})
			},
			showinfo() {
				let params = {
					// #ifdef APP
					name: 'hide_status',
					// #endif
					// #ifdef MP-WEIXIN
					name: 'miniapp_hide_status'
					// #endif
				}
				this.$Request({
					method: 'POST',
					url: '/api/index/getConfig',
					data: params,
					ismsg: false,
				}).then(res => {
					if (res.code == 1) {
						this.tabshow = res.data
					}
				})
			},
			getuserinfo() {
				this.$Request({
					method: 'POST',
					url: '/api/user/getMyInfo',
					data: {},
					ismsg: false,
				}).then(res => {
					if (res.code == 1) {
						this.info = res.data
					} else {
						this.info = {}
					}
				})
			},
			NoOpen() {
				uni.showToast({
					icon: 'none',
					title: "暂未开放"
				})
			},
			gotonav(url) {
				let token = uni.getStorageSync("token") || '';
				if (token != '') {
					if (url == '/pages/my/agent/agency-pay/index') {
						if(this.info.agent_ids == 0){
							this.$navTo.togo(url)
						}else{
							this.$navTo.togo('/pages/my/agent/agency-center/index')
						}
						
					} else if (url == '/pages/session-info/session-info') {
						wx.openCustomerServiceChat({
							extInfo: {
								url: 'https://work.weixin.qq.com/kfid/kfcb8f13051fb4e767f' //客服地址链接
							},
							corpId: 'ww3d05dfba76a348f3', //必须和你小程序上的一致
							success(res) {
								console.log(res, 1)
							},
							fail(res) {
								console.log(res, 2)
							},
						})
					} else {
						this.$navTo.togo(url)
					}
				}else{
					uni.showModal({
						title: '提示',
						content: '请登录！体验完整功能！',
						confirmText:'去登录',
						success: function (res) {
							if (res.confirm) {
								console.log('用户点击确定');
								uni.reLaunch({
									url:'/pages/login/index'
								})
							} else if (res.cancel) {
								console.log('用户点击取消');
							}
						}
					});
				}
			},
			editInfo() {
				this.$navTo.togo('/pages/my/edit-info/index')
			},
			goVip() {
				this.$navTo.togo('/pages/my/member/index')
			}
		}
	}
</script>

<style>
	page {
		background-color: #F7F8FC;
	}
</style>
<style lang="scss" scoped>
	.head {
		background-color: #D7D8FF;
		padding-bottom: 70rpx;

		.head-box {
			padding: 30rpx 40rpx;
			margin-top: 20rpx;
			display: flex;
			justify-content: space-between;
			align-items: center;

			.head-left {
				.head-top {
					display: flex;
					align-items: center;

					.name {
						margin-right: 20rpx;
						font-size: 40rpx;
						color: #2E314A;
						font-weight: bold;
					}

					image {
						width: 100rpx;
						height: 45rpx;
					}
				}

				.id {
					font-size: 24rpx;
					color: #626479;
					font-weight: bold;
					margin-top: 20rpx;
					display: flex;
					align-items: center;
					image{
						width: 176rpx;
						height: 60rpx;
						margin-left: 10rpx;
					}
				}
			}

			.portrait {
				position: relative;

				.head-box {
					display: flex;
					align-items: center;
					justify-content: center;
					width: 180rpx;
					height: 180rpx;
				
					.head {
						/* 外层容器尺寸根据实际情况调整 */
						width: 180rpx;
						height: 180rpx;
					}
				
					.avatar-container {
					  position: relative;
					  width: 180rpx;
					  height: 180rpx;
					  background-repeat: no-repeat;
					  background-size: 100% 100%;
					  /* 关键：移除裁剪 */
					  overflow: visible;
					  border-radius: 50%; /* 如果需要圆形 */
					}
					
					.avatar-frame {
					  position: absolute;
					  z-index: 2;
					  pointer-events: none;
					}
				
				}
				

				.edit {
					position: absolute;
					bottom: -15rpx;
					left: 0;
					right: 0;
					background-color: #5755F2;
					border-radius: 30rpx;
					display: flex;
					justify-content: center;
					font-size: 20rpx;
					padding: 10rpx;
					color: #fff;
					z-index: 999;
					.edit-text {
						margin-left: 10rpx;
					}
				}
			}
		}
	}

	.content {
		padding: 30rpx;

		.member {
			margin-top: -80rpx;

			image {
				width: 100%;
				height: 170rpx;
			}
		}

		.use {
			background-color: #fff;
			border-radius: 30rpx;
			padding: 30rpx;
			margin-top: 30rpx;

			.use-box {
				display: flex;
				justify-content: space-around;
				text-align: center;

				.use-item {
					position: relative;

					.make {
						position: absolute;
						top: -20rpx;
						right: -50rpx;
						color: #fff;
						font-size: 20rpx;
						background-color: #F24789;
						padding: 6rpx 10rpx;
						border-radius: 20rpx;
						border-bottom-left-radius: 5rpx;
					}

					.use-icon {
						background-color: #EFEFFF;
						padding: 20rpx 0rpx;
						border-radius: 20rpx;

						image {
							width: 45rpx;
							height: 48rpx;
						}
					}

					.use-text {
						margin-top: 20rpx;
						font-size: 24rpx;
						color: #626479;
					}
				}

			}

			.discount {
				background-image: url('https://m.lqvvvv.com/assets/static/my/discount.png');
				background-repeat: no-repeat;
				background-size: 100% 100%;
				padding: 30rpx;
				margin-top: 30rpx;

				.discount-title {
					font-size: 28rpx;
					color: #2E314A;
					font-weight: bold;
				}

				.discount-text {
					margin-top: 20rpx;
					font-size: 22rpx;
					color: #8B8DA0;
					display: flex;
					align-items: center;

					image {
						width: 24rpx;
						height: 24rpx;
						margin-left: 10rpx;
					}
				}
			}
		}

		.service {
			background-color: #fff;
			border-radius: 30rpx;
			padding: 30rpx 30rpx 0;
			margin-top: 30rpx;

			.service-title {
				color: #000;
				font-size: 32rpx;
			}

			.service-box {
				display: flex;
				flex-wrap: wrap;
				margin-top: 30rpx;
				text-align: center;

				.service-item {
					width: 25%;
					margin-bottom: 30rpx;

					image {
						width: 54rpx;
						height: 54rpx;
					}

					.service-text {
						margin-top: 10rpx;
						font-size: 28rpx;
						color: #2E314A;
					}
				}
			}

		}
	}
</style>